<template>
    <dv-border-box-8 class="trend-panel">
      <div class="panel-header">
        <i class="el-icon-trending-up"></i>
        生产趋势分析
      </div>
      
      <div class="trend-content">
        <div ref="trendChart" class="trend-chart"></div>
      </div>
    </dv-border-box-8>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import * as echarts from 'echarts'
  
  const props = defineProps({
    trendData: {
      type: Array,
      required: true
    }
  })
  
  const trendChart = ref(null)
  let chartInstance = null
  
  // 初始化图表
  const initChart = () => {
    if (!trendChart.value) return
    
    chartInstance = echarts.init(trendChart.value)
    
    const option = {
      tooltip: {
        trigger: 'axis',
        formatter: '{b0}: {c0} 件'
      },
      xAxis: {
        type: 'category',
        data: props.trendData.map(item => item.date),
        axisLabel: {
          color: '#fff'
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#fff'
        }
      },
      series: [{
        name: '生产量',
        type: 'line',
        data: props.trendData.map(item => item.output),
        itemStyle: {
          color: '#67c23a'
        },
        lineStyle: {
          width: 2
        },
        smooth: true
      }]
    }
    
    chartInstance.setOption(option)
  }
  
  // 监听窗口大小变化
  const handleResize = () => {
    chartInstance && chartInstance.resize()
  }
  
  onMounted(() => {
    initChart()
    window.addEventListener('resize', handleResize)
  })
  
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
    chartInstance && chartInstance.dispose()
  })
  </script>
  
  <style scoped>
  .trend-panel {
    width: 100%;
    height: 350px;
    position: relative;
    padding: 15px;
  }
  
  .panel-header {
    font-size: 16px;
    color: #29b6ff;
    margin-bottom: 15px;
  }
  
  .trend-content {
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
  }
  
  .trend-chart {
    width: 100%;
    height: 100%;
  }
  </style>